$(function(){
	// open the city tab
	$("#info-block").off("click", ".normal-region");
	$("#info-block").on("click", ".normal-region", function(){
		var $cur = $(this);
		var $parent = $cur.parents("div.data-block");
		$(".data-tabs").find(".natty-tabs>li[data-index='2']>label>span").text($cur.data("name"));
		$(".data-tabs").find(".natty-tabs>li[data-index='2']").addClass("active-tab").show();
		$(".data-tabs").find(".natty-tabs>li[data-index='1']").removeClass("active-tab");
		
		loadCityByProvince($cur.data("id"), $cur.data("name"), false);
	});
	
	// open the city tab with checked
	$("#info-block").off("click", ".smart-region");
	$("#info-block").on("click", ".smart-region", function(){
		var $cur = $(this);
		var $parent = $cur.parents("div.data-block");
		$(".data-tabs").find(".natty-tabs>li[data-index='2']>label>span").text($cur.data("name"));
		$(".data-tabs").find(".natty-tabs>li[data-index='2']").addClass("active-tab").show();
		$(".data-tabs").find(".natty-tabs>li[data-index='1']").removeClass("active-tab");
		
		loadCityByProvince($cur.data("id"), $cur.data("name"), true);
	});
	
	// select the city
	$("#info-block").off("click", ".normal-bee");
	$("#info-block").on("click", ".normal-bee", function(){
		var $cur = $(this);
		var item = "<label class='result-item' data-id='"+$cur.data("id")+"' data-parent='"+$cur.data("parent")+"'><span>"+$cur.data("name")+"</span><span class='icon-remove'></span></label>"
		$(".result-panel").append(item);
		var $label = $("#info-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("parent")+"']");
		var curItems = $label.find("span").text();
		curItems = curItems ? (curItems / 1 + 1) : 1;
		$label.find("span").text(curItems).addClass("smart-num");
		$cur.removeClass("normal-bee").addClass("smart-bee");
		
		var vals = $("#sel-city").val();
		vals += "," + $cur.data("id");
		vals = vals.startsWith(",") ? vals.substr(1) : vals;
		$("#sel-city").val(vals);
	});
	
	// deselect the city 
	$("#info-block").off("click", ".smart-bee");
	$("#info-block").on("click", ".smart-bee", function(){
		var $cur = $(this);
		var $item = $(".result-panel").find("label[data-id='"+$cur.data("id")+"']");
		$item.remove();
		
		var $label = $("#info-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("parent")+"']");
		var curItems = $label.find("span").text();
		curItems = curItems ? (curItems / 1 - 1) : 1;
		if(curItems == 0) {
			$label.find("span").text("").removeClass("smart-num");
		} else {
			$label.find("span").text(curItems);
		}
		
		var vals = $("#sel-city").val();
		var valArr = vals.split(",");
		var _vals = "";
		for(var i in valArr) {
			var _val = valArr[i];
			if(_val != $cur.data("id")) {
				_vals += "," + _val;
			}
		}
		_vals = _vals.startsWith(",") ? _vals.substr(1) : _vals;
		$("#sel-city").val(_vals);
		
		$cur.removeClass("smart-bee").addClass("normal-bee");
	});
	
	// select the province
	$("#info-block").off("click", ".natty-selector");
	$("#info-block").on("click", ".natty-selector", function(){
		var $cur = $(this);
		
		var item = "<label class='result-item' data-id='"+$cur.data("id")+"' data-parent='"+$cur.data("id")+"'><span>"+$cur.data("name")+"</span><span class='icon-remove'></span></label>"
		$(".result-panel").append(item);
		
		var ids = ""
		$("#info-block").find(".data-block[data-tab='2']").find(".data-info>ul>li>label").each(function(){
			var $label = $(this);
			var id = $label.data("id");
			ids += "," + id;
		});
		
		var vals = $("#sel-city").val();
		var valArr = vals.split(",");
		var _vals = "";
		var rmIds = new Array();
		for(var i in valArr) {
			var _v = valArr[i];
			if(ids.indexOf(_v) == -1) {
				_vals +=  _v + ",";
			} else {
				rmIds.push(_v);
			}
		}
		_vals += $cur.data("id");
		$("#sel-city").val(_vals);
		
		for(var x in rmIds) {
			var _x = rmIds[x];
			$(".result-panel>label.result-item[data-id='"+_x+"']").remove();
		}
					
		var $block = $("#info-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("id")+"']");
		$block.removeClass("normal-region").addClass("smart-region");
		$block.find("span").text("1")
		$("#info-block").find(".data-block[data-tab='2']").find(".data-info>ul>li>label").removeClass("normal-bee").removeClass("smart-bee").addClass("disable-bee");
		$cur.removeClass("natty-selector").addClass("smart-selector");
	});
	
	// deselect the province
	$("#info-block").off("click", ".smart-selector");
	$("#info-block").on("click", ".smart-selector", function(){
		var $cur = $(this);
		
		var $item = $(".result-panel").find("label[data-id='"+$cur.data("id")+"']");
		$item.remove();
		
		var vals = $("#sel-city").val();
		var valArr = vals.split(",");
		var _vals = "";
		for(var i in valArr) {
			var _val = valArr[i];
			if(_val != $cur.data("id")) {
				_vals += "," + _val;
			}
		}
		_vals = _vals.startsWith(",") ? _vals.substr(1) : _vals;
		$("#sel-city").val(_vals);
		
		var $block = $("#info-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("id")+"']");
		$block.removeClass("smart-region").addClass("normal-region");
		$block.find("span").text("").removeClass("smart-num");
		$("#info-block").find(".data-block[data-tab='2']").find(".data-info>ul>li>label").removeClass("disable-bee").addClass("normal-bee");
		$cur.removeClass("smart-selector").addClass("natty-selector");
	});
	
	// search the city
	$("#info-block").off("keyup", "#search-city");
	$("#info-block").on("keyup", "#search-city", function(event){
		var val = $(this).val();
		if(val != "" && event.keyCode == 13) {
			loadCityBySearch(val);
		}
	});
	
	// select the result
	$("#info-block").off("click", ".search-result>ul>li>label");
	$("#info-block").on("click", ".search-result>ul>li>label", function(){
		var $cur = $(this);
		var vals = $("#sel-city").val();
		if(vals.indexOf($cur.data("id")) == -1) {
			var item = "<label class='result-item' data-id='"+$cur.data("id")+"' data-parent='"+$cur.data("parent")+"'><span>"+$cur.data("name")+"</span><span class='icon-remove'></span></label>"
			$(".result-panel").append(item);
			vals = (vals == "") ? $cur.data("id") :  vals + "," + $cur.data("id");
			$("#sel-city").val(vals);
			
			var $label = $("#info-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("parent")+"']");
			var curItems = $label.find("span").text();
			curItems = curItems ? (curItems / 1 + 1) : 1;
			$label.find("span").text(curItems).addClass("smart-num");
			$cur.removeClass("normal-bee").addClass("smart-bee");
		}
		$(".search-result").hide();
	});
	
	// delete the selects
	$("#info-block").off("click", ".result-item");
	$("#info-block").on("click", ".result-item", function(){
		var vals = $("#sel-city").val();
		var id = $(this).data("id");
		var valArr = vals.split(",");
		var _val = "";
		for(var i in valArr) {
			var _v = valArr[i];
			if(_v != id) {
				_val += "," + _v;
			}
		}
		_val = _val.startsWith(",") ? _val.substr(1) : _val;
		$("#sel-city").val(_val);
		
		var parentId = $(this).data("parent");
		if(id == parentId) {
			var $block = $("#info-block").find(".data-block[data-tab='1']").find("label[data-id='"+parentId+"']");
			$block.removeClass("smart-region").addClass("normal-region");
			$block.find("span").text("").removeClass("smart-num");
		} else {
			var $block = $("#info-block").find(".data-block[data-tab='1']").find("label[data-id='"+parentId+"']");
			var items = $block.find("span").text();
			items = items / 1 - 1;
			if(items == 0) {
				$block.find("span").text("").removeClass("smart-num");
			} else {
				$block.find("span").text(items);
			}
		}
		
		$(this).remove();
	})
	
	// close the city win
	$("#info-block").off("click", "#extra-boot");
	$("#info-block").on("click", "#extra-boot", function(){
		$(".data-tabs").find(".natty-tabs>li[data-index='2']>label>span").text("");
		$(".data-tabs").find(".natty-tabs>li[data-index='2']").removeClass("active-tab").hide();
		$(this).parent().addClass("active-tab");
		var $block = $("#info-block").find(".data-block[data-tab='2']");
		$block.find("h4").html("");
		$block.find("div>ul").empty();
		$block.hide();
		$("#info-block").find(".data-block[data-tab='1']").show();
	});
});

function repageSelection(_id, _pid) {
	var idArr = _id.split(",");
	var pidArr = _pid.split(",");
	var $block = $("#info-block").find(".data-block[data-tab='1']");
	for(var i in idArr) {
		var c_id = idArr[i];
		var c_pid = pidArr[i];
		
		if(c_id == c_pid) {
			$block.find(".data-info>ul>li>label[data-id='"+c_id+"']").removeClass("normal-region").addClass("smart-region");
			$block.find(".data-info>ul>li>label[data-id='"+c_id+"']").find("span").text("1").addClass("smart-num");
		} else {
			var _span = $block.find(".data-info>ul>li>label[data-id='"+c_pid+"']").find("span");
			var $label = $block.find(".data-info>ul>li>label[data-id='"+c_pid+"']");
			var num = $label.find("span").text();
			num = num == "" ? 1 : num / 1 + 1;
			$label.find("span").text(num);
			if(!$label.find("span").hasClass("smart-num")) {
			}
				$label.find("span").addClass("smart-num");
		}
	}
}

function loadProvince(){
	var req = $.ajax({
		type: "GET",
		url: $("#path").val() + "city.json",
		dataType: "JSON"
	});
	
	req.done(function(data){
		var provinceList = data.provinceList;
		var content = "";
		for(var x in provinceList) {
			var _cur = provinceList[x];
			content += "<li><label class='normal-region' data-name='"+_cur.name+"' data-id='"+_cur.code+"'>"+_cur.name+"<span></span></li>";
		}
		$("#info-block").find(".data-block[data-tab='1']>div>ul").append(content);
	});
}

function loadCityByProvince(code, name, checkProvince) {
	var sels = $("#sel-city").val();
	var req = $.ajax({
		type: "GET",
		url: $("#path").val() + "city.json",
		dataType: "JSON"
	});
	
	req.done(function(data){
		var cityList = data.cityList;
		var content = "";
		for(var x in cityList) {
			var _cur = cityList[x];
			if(_cur.parentCode == code) {
				var cls = sels.indexOf(_cur.code) == -1 ? "normal-bee" : "smart-bee";
				cls = checkProvince ? "disable-bee" : cls;
				content += "<li><label class='"+cls+"' data-name='"+_cur.name+"' data-id='"+_cur.code+"' data-parent='"+_cur.parentCode+"'>"+_cur.name+"<span></span></li>"	
			}
		}
		$("#info-block").find(".data-block[data-tab='1']").hide();
		var $block = $("#info-block").find(".data-block[data-tab='2']");
		$block.show();
		var l_cls = checkProvince ? "smart-selector" : "natty-selector";
		var info = "<label class='"+l_cls+"' data-name='"+name+"' data-id='"+code+"'>" + name + "<span></span></label>";
		$block.find("h4").html(info);
		$("#info-block").find(".data-block[data-tab='2']>div>ul").append(content);
	});
}
	
function loadCityBySearch(searchVal) {
	var req = $.ajax({
		type: "GET",
		url: $("#path").val() + "city.json",
		dataType: "JSON"
	});
	
	req.done(function(data){
		var cityList = data.cityList;
		var content = "";
		var cityList = data.cityList;
		var content = "";
		for(var x in cityList) {
			var _cur = cityList[x];
			if(_cur.name.indexOf(searchVal) != -1) {
				content += "<li><label data-id='"+_cur.code+"' data-name='"+_cur.name+"' data-parent='"+_cur.parentCode+"'><span>"+_cur.name+"</span></label></li>";
			}
		}
		if(content != "") {
			$(".search-result>ul").empty().append(content);
			$(".search-result").show();
		}
	});
}
